<template>
  <div>
    <!-- 顶部多条件搜索框 -->
    <el-form :inline="true" :model="blSearch" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary">合计付款</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">新增临时收费</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      </el-form-item>
      <!-- 四级查询房间 -->
      <el-form-item label="小区" align>
        <el-select v-model="blSearch.cell.cid" placeholder="请选择小区" filterable clearable @change="loadBuildings">
          <el-option v-for="item in cellList" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋" align>
        <el-select v-model="blSearch.building.bid" placeholder="请选择楼栋" filterable clearable @change="loadUnitss">
          <el-option v-for="item in buildingList" :key="item.bid" :label="item.bname" :value="item.bid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" align>
        <el-select v-model="blSearch.room.units" placeholder="请选择单元" filterable clearable @change="loadRooms">
          <el-option v-for="item in roomList" :key="item.units" :label="item.units" :value="item.units"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间" align>
        <el-select v-model="blSearch.room.rid" placeholder="请选择房间号" filterable clearable>
          <el-option v-for="item in roomList" :key="item.rid" :label="item.roomnum" :value="item.rid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllBillButton">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- TODO 这里小区和楼栋显示数字而不是名，做完后最后做bill账单，导出导入
         数据量多的话可以用到多线程等技术来优化 -->
    <!-- 显示所有数据的表格 -->
    <el-table :data="blList" style="width: 100%" @selection-change="selsChange">
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="blid" label="编号" width="60" align="center"></el-table-column>
      <el-table-column prop="cid" label="小区" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.cid == 1">中山国际</span>
          <span v-if="scope.row.cid == 2">中心国际</span>
          <span v-if="scope.row.cid == 3">天海一号</span>
          <span v-if="scope.row.cid == 4">保利Ⅲ</span>
          <span v-if="scope.row.cid == 5">碧桂园</span>
          <span v-if="scope.row.cid == 6">天空之城</span>
        </template>
      </el-table-column>
      <el-table-column prop="bid" label="楼栋" width="60" align="center"></el-table-column>
      <el-table-column prop="room.units" label="单元号" width="80" align="center"></el-table-column>
      <el-table-column prop="room.roomnum" label="房间号" width="80" align="center"></el-table-column>
      <!-- 要改fname这个表名，不然的话fname.fname不生效的 -->
      <el-table-column prop="fee.fnid" label="项目名称" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.fee.fnid == 1">代收水费</span>
          <span v-if="scope.row.fee.fnid == 2">代收电费</span>
          <span v-if="scope.row.fee.fnid == 3">代收燃气费</span>
          <span v-if="scope.row.fee.fnid == 4">物业费</span>
          <span v-if="scope.row.fee.fnid == 5">停车费</span>
          <span v-if="scope.row.fee.fnid == 6">车位费</span>
          <span v-if="scope.row.fee.fnid == 7">费用A</span>
          <span v-if="scope.row.fee.fnid == 8">费用A</span>
          <span v-if="scope.row.fee.fnid == 9">费用A</span>
          <span v-if="scope.row.fee.fnid == 10">费用A</span>
        </template>
      </el-table-column>
      <el-table-column prop="fee.fid" label="收费标准" width="100" align="center"></el-table-column>
      <el-table-column prop="month" label="月份" width="120" align="center"></el-table-column>
      <el-table-column prop="fee.uprice" label="单价" width="120" align="center"></el-table-column>
      <el-table-column prop="meterReading.dose" label="数量" width="120" align="center"></el-table-column>
      <el-table-column prop="tprice" label="应收金额" width="100" align="center"></el-table-column>
      <el-table-column prop="fine" label="滞纳金" width="100" align="center"></el-table-column>
      <el-table-column prop="shprice" label="应缴金额" width="80" align="center"></el-table-column>
      <el-table-column prop="paydate" label="付款日期" width="80" align="center"></el-table-column>
    </el-table>

    <!-- 操作栏 -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

    <!-- 编辑和新增 弹出的对话框 -->
    <!-- <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="blForm" label-width="80px" :rules="dialogRules" ref="blUpOrAdd">
        <el-form-item label="小区" prop="cell.cid">
          <el-select v-model="blForm.cell.cid" placeholder="请选择小区名称" filterable clearable @change="dialogLoadBuildingsAndFees">
            <el-option v-for="item in cellList" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋" prop="building.bid">
          <el-select v-model="blForm.building.bid" placeholder="请选择楼栋" filterable clearable @change="dialogLoadUnitss">
            <el-option v-for="item in buildingList" :key="item.bid" :label="item.bname" :value="item.bid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元" prop="room.units">
          <el-select v-model="blForm.room.units" placeholder="请选择单元" filterable clearable @change="dialogLoadRooms">
            <el-option v-for="item in roomList" :key="item.units" :label="item.units" :value="item.units"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间" prop="room.rid">
          <el-select v-model="blForm.room.rid" placeholder="请选择房间号" filterable clearable>
            <el-option v-for="item in roomList" :key="item.rid" :label="item.roomnum" :value="item.rid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费标准" prop="fee.fid">
          <el-select v-model="blForm.fee.fid" placeholder="请选择收费标准" filterable clearable>
            <el-option v-for="item in feeList" :key="item.fid" :label="item.fname" :value="item.fid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="month">
          <el-date-picker v-model="blForm.month" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="单价" prop="fee.uprice">
          <el-input v-model="blForm.dose" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="edegree">
          <el-input v-model="blForm.dose" placeholder="请输入数量"></el-input>
        </el-form-item>
        <el-form-item label="倍率" prop="rate">
          <el-input v-model="blForm.tprice" placeholder="请输入倍率"></el-input>
        </el-form-item>
        <el-form-item label="公摊" prop="pooled">
          <el-input v-model="mrForm.pooled" placeholder="请输入公摊"></el-input>
        </el-form-item>
        <el-form-item label="损耗" prop="loss">
          <el-input v-model="mrForm.loss" placeholder="请输入损耗"></el-input>
        </el-form-item>
        <el-form-item label="用量" prop="dose">
          <el-input v-model="mrForm.dose" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('mrUpOrAdd')">取消</el-button>
        <el-button type="primary" @click="upOrAdd('mrUpOrAdd')">提交</el-button>
      </div>
    </el-dialog> -->
    <!-- 分页组件 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[2, 3, 4]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 查询
      blSearch: {
        cell: {
          cid: null,
        },
        building: {
          bid: null,
        },
        room: {
          rid: null,
        }
      },
      cellList: [],
      buildingList: [],
      roomList: [],
      feeList: [],
      fnameList: [],
      mrList: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 4,
      total: 0,
      // 展示
      blList: [],
      sels: [], // 列表多选选中行
      // 弹出框
      // dialogFormVisible: false,
      // dialogTitle: "",
      // dialogRules: {
      //   "cell.cid": [
      //     { required: true, trigger: 'change', message: '请选择小区' }
      //   ],
      //   "building.bid": [
      //     { required: true, trigger: 'change', message: '请选择楼栋' }
      //   ],
      //   "room.units": [
      //     { required: true, trigger: 'change', message: '请选择单元' }
      //   ],
      //   "room.rid": [
      //     { required: true, trigger: 'change', message: '请选择房间号' }
      //   ],
      //   "fee.fid": [
      //     { required: true, trigger: 'change', message: '请选择收费项目' }
      //   ],
      //   month: [
      //     { required: true, trigger: ['change', 'blur'], message: '请选择月份' }
      //   ],
      //   sdegree: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入起度数' },
      //     { pattern: /^\d+$/, message: '请输入数字并且有小数点后有两位' }
      //   ],
      //   edegree: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入止度数' },
      //     { pattern: /^\d+$/, message: '请输入数字并且有小数点后有两位' }
      //   ],
      //   rate: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入倍率' },
      //     { pattern: /^[1-9]\d*$/, message: '请输入正整数' }
      //   ],
      //   pooled: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入公摊' },
      //     { pattern: /^[0-9]$/, message: '请重新输入' }
      //   ],
      //   loss: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入损耗' },
      //     { pattern: /^[0-9]$/, message: '请重新输入' }
      //   ],
      //   dose: [
      //     { required: true, trigger: ['change', 'blur'], message: '请输入' },
      //   ],
      // },
      // mrForm: { 
      //   sdegree: 0,
      //   edegree: 0,
      //   rate: 0,
      //   pooled: 0,
      //   loss: 0,
      //   cell: {
      //     cid: null,
      //     cname: "",
      //   },
      //   building: {
      //     bid: null,
      //     bname: "",
      //   },
      //   room: {
      //     rid: null,
      //     roomnum: null,
      //     units: null,
      //   },
      //   fee: {
      //     cid: null,
      //     fid: null,
      //   },
      // }
    }
  },
  // computed: {
  //   dose() {
  //     return (this.mrForm.edegree - this.mrForm.sdegree) * this.mrForm.rate + this.mrForm.pooled + this.mrForm.loss;
  //   }
  // },
  methods: {
    selsChange: function (sels) {
      this.sels = sels;
    },
    handleSizeChange(val) {
      // 页大小改变，重新查询
      this.pageSize = val;
      this.getAllBill();
    },
    handleCurrentChange(val) {
      // 当前页改变，重新查询
      this.pageIndex = val;
      this.getAllBill();
    },
    // 获取分页和多条件查询展示的数据
    getAllBill() {
      this.$axios.post("/bill/findAll/" + this.pageIndex + "/" + this.pageSize, this.blSearch).then((resp) => {
        this.blList = resp.data.data.beanList;
        this.total = resp.data.data.totalRecord;
      })
    },
    // 获取xx来做查询
    loadCells() {
      this.$axios.post("/fee/findAllCell").then((resp) => {
        this.cellList = resp.data.data;
      })
    },
    loadBuildings() {
      this.$axios.post("/meterReading/findBuildings/" + this.blSearch.cell.cid).then((resp) => {
        this.buildingList = resp.data.data;
        this.mrForm.building.bid = null;// 清空楼栋选择
        // this.loadUnitss();// 加载单元选择
      })
    },
    loadUnitss() {
      this.$axios.post("/meterReading/findUnits/" + this.blSearch.building.bid).then((resp) => {
        this.roomList = resp.data.data;
        this.mrForm.room.units = null;// 清空单元选择
        // this.loadRooms();// 加载房间选择
      })
    },
    loadRooms() {
      this.$axios.post("/meterReading/findRooms/" + this.blSearch.room.units).then((resp) => {
        this.roomList = resp.data.data;
        this.mrForm.room.rid = null;// 清空房间选择
      })
    },
    // // 对话框的四级联查
    // dialogLoadBuildingsAndFees() {
    //   this.$axios.post("/meterReading/findBuildings/" + this.mrForm.cell.cid).then((resp) => {
    //     this.buildingList = resp.data.data;
    //     this.mrForm.building.bid = null;// 清空楼栋选择
    //     // this.loadUnitss();// 加载单元选择
    //   });
    //   this.$axios.post("/meterReading/findFees/" + this.mrForm.cell.cid).then((resp) => {
    //     this.feeList = resp.data.data;
    //     this.mrForm.fee.fid = null;// 清空选择
    //   });
    // },
    // dialogLoadUnitss() {
    //   this.$axios.post("/meterReading/findUnits/" + this.mrForm.building.bid).then((resp) => {
    //     this.roomList = resp.data.data;
    //     this.mrForm.room.units = null;// 清空单元选择
    //     // this.loadRooms();// 加载房间选择
    //   })
    // },
    // dialogLoadRooms() {
    //   this.$axios.post("/meterReading/findRooms/" + this.mrForm.room.units).then((resp) => {
    //     this.roomList = resp.data.data;
    //     this.mrForm.room.rid = null;// 清空房间选择
    //   })
    // },

    getAllBillButton() {
      this.pageIndex = 1;
      this.pageSize = 4;
      this.getAllBill();
    },

    // // 新增对话框
    // handleAdd() {
    //   this.dialogFormVisible = true;
    //   this.dialogTitle = "补录数据";
    //   this.mrForm = {
    //     cell: {
    //       cid: null,
    //       cname: "",
    //     },
    //     building: {
    //       bid: null,
    //       bname: "",
    //     },
    //     room: {
    //       rid: null,
    //       roomnum: null,
    //       units: null,
    //     },
    //     fee: {
    //       fid: null,
    //       fname: "",
    //     },
    //   }
    // },

    // // 编辑弹出带表单的对话框
    // handleEdit(index, row) {
    //   this.dialogFormVisible = true;
    //   this.dialogTitle = "编辑数据";
    //   // 回显编辑前的数据 ES6的语法
    //   this.mrForm = { ...row };
    // },

    // getFnameList() {
    //   this.$axios.get("/fee/findFnameList").then((resp) => {
    //     this.fnameList = resp.data.data;
    //   })
    // },
    // getMrList() {
    //   this.$axios.get("/fee/findFnameList").then((resp) => {
    //     this.fnameList = resp.data.data;
    //   })
    // },

    // // 确认编辑或新增
    // upOrAdd(formName) {
    //   //验证方法
    //   this.$refs[formName].validate((valid) => {
    //     //将refs中的数据放入validate校验器中验证，（valid）为一个回调函数
    //     //验证成功则发送请求传递给后端
    //     if (valid) {
    //       this.$axios.post("/meterReading/upOrAdd", this.mrForm).then((resp) => {
    //         if (resp.data.code == 200) {
    //           this.$message({
    //             message: JSON.stringify(resp.data.msg),
    //             type: 'success'
    //           })
    //           this.getAllMeterReading();
    //           this.dialogFormVisible = false;
    //         } else {
    //           this.$message({
    //             message: JSON.stringify(resp.data.msg),
    //             type: 'warning'
    //           })
    //         }
    //       });
    //     }
    //   });
    // },
    // // 关闭对话框
    // closeDialog() {
    //   // 清空数据
    //   this.mrForm = {
    //     cell: {
    //       cid: null,
    //       cname: "",
    //     },
    //     building: {
    //       bid: null,
    //       bname: "",
    //     },
    //     room: {
    //       rid: null,
    //       roomnum: null,
    //       units: null,
    //     },
    //     fee: {
    //       fid: null,
    //       fname: "",
    //     },
    //   };
    //   // 清空前端验证的提示
    //   this.$refs.mrUpOrAdd.resetFields();
    // },
    // // 对话框取消
    // cancel(formName) {
    //   this.$refs[formName].clearValidate();
    //   this.dialogFormVisible = false
    // },

    // 单行删除
    handleDel(index, row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.post('/bill/delById/' + row.blid).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllBill();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 批量删除,逻辑删除，并没有真的删除，而是改变状态，后台不展示此状态的数据
    batchRemove() {
      var ids = this.sels.map(item => item.blid);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { ids: ids };
        this.$axios.patch('/bill/batchDel', ids).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllBill();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getAllBill();
    this.loadCells();
  },
};

</script>

<style>
</style>